<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="24" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button style="margin-left: 8px" type="primary" icon="plus" @click="handleAdd">新建</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps">
        <span slot="status" slot-scope="text, record">
          <a-switch :checked="record.status" @change="choose(record)" checked-children="开" un-checked-children="关" />
        </span>
        <span slot="activityId" slot-scope="text">
          {{ redPackage(text, redList) }}
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">编辑</a>
          </template>
        </span>
      </s-table>
    </a-card>
    <ModifyDrawer ref="modifyDrawer" :uploadParams="uploadParams" v-if="showEdit" @editOk="editOk"></ModifyDrawer>
  </div>
</template>
<script>
import { STable } from '@/views/box/components'
import { replyList, replyCreate, activityList } from '@/api/box/setting'
import { routeMixin } from '@/views/box/util/routeMixin'
import ModifyDrawer from './modifyDrawer.vue'
import globalData from '@/assets/js/common'

const columns = [
  { title: '标题', width: 200, dataIndex: 'title', align: 'center' },
  { title: '关键字', dataIndex: 'keys', align: 'center' },
  { title: '关联红包', dataIndex: 'activityId', align: 'center', scopedSlots: { customRender: 'activityId' } },
  { title: '关联优惠券', dataIndex: 'vouvherNames', align: 'center' },
  { title: '优惠券剩余数量', dataIndex: 'voucherNumber', align: 'center' },
  { title: '开启状态', dataIndex: 'status', align: 'center', scopedSlots: { customRender: 'status' } },
  { title: '创建时间', dataIndex: 'createTime', align: 'center' },

  {
    title: '操作',
    fixed: 'right',
    width: 120,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  mixins: [routeMixin],
  components: {
    STable,
    ModifyDrawer
  },
  data() {
    return {
      columns,
      uploadParams: null,
      showEdit: false,
      // 查询条件参数
      queryParam: {},
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => this.fetchData(parameter),
      redList: []
    }
  },
  watch: {
    showEdit(value) {
      if (value) this.$refs.table.refresh(true)
    }
  },
  computed: {
    redPackage() {
      return (text, redList) => {
        let result = redList.filter(e => e.id == text)
        if (result.length > 0) {
          return result[0].name
        } else {
          return text
        }
      }
    }
  },
  mounted() {},
  created() {
    this.initialPage()
  },
  methods: {
    async initialPage() {
      this.uploadParams = this.getUploadParams()

      this.showEdit = true
      this.envelopeData()
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    editOk() {
      this.$refs.table.refresh()
    },
    fetchData(parameter) {
      let params = {
        page: parameter,
        requestData: this.queryParam
      }
      return replyList(params).then(res => {
        if (res.code == 0) {
          res.data.forEach(item => {
            item.status = item.status == 1 ? true : false
          })
          return {
            data: res.data,
            page: res.page
          }
        } else {
          this.$message.warning(res.msg)
          return {
            data: [],
            page: {
              pageNo: 0,
              count: 0,
              pageSize: 10
            }
          }
        }
      })
    },
    // 开关
    choose(record) {
      let params = {
        page: {
          pageNo: 1,
          pageSize: 10
        },
        requestData: {
          id: record.id,
          status: record.status ? 0 : 1
        }
      }
      replyCreate(params).then(res => {
        if (res.code == 0) {
          this.$message.success('修改成功！')
          this.$refs.table.refresh(true)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleAdd() {
      this.$refs.modifyDrawer.showModal('add')
    },
    handleEdit(record) {
      this.$refs.modifyDrawer.showModal(record.id)
    },
    // 删除
    deleteClick() {},
    searchList() {
      this.$refs.table.refresh(true)
    },
    resetList() {
      this.queryParam = {
        name: '',
        type: '',
        status: ''
      }
      this.$refs.table.refresh(true)
    },
    updateTable() {
      this.$refs.table.refresh()
    },
    // 红包活动数据
    envelopeData() {
      let params = {
        page: {
          pageNo: 1,
          pageSize: 1000
        },
        requestData: {}
      }
      activityList(params).then(res => {
        if (res.code == 0) {
          this.redList = res.data
        }
      })
    }
  }
}
</script>

